<template>
	<scroll-view scroll-y="true">
		<section title="基本用法" type="line">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @input="handleToSuggest"  >
			</uni-search-bar>
		</section>

		<view v-if="!searchValue" class="search-history">
			<view class="search-history-head">
				<span>历史记录</span>
				<text class="iconfont iconlajitong" @tap="handleToClear"></text>
			</view>
			<!-- 显示搜索保存的数据 -->
			<view class="search-history-list">
				<view v-for="(item,index) in historyList" :key="index" @tap="handleToWord(item)">
					<text>{{ item }}</text>
				</view>
			</view>
		</view>

		<!-- 搜索列表 -->
		<view v-if="sertType==2" class="search-suggest">
			<view class="search-suggest-title">搜索"{{ this.searchValue }}"</view>
			<view class="search-suggest-item" v-for="(item,index) in suggestList" :key="index"
				@tap="handleToWord(item.keyword)">
				<text class="iconfont iconsearch"></text>
				{{ item.keyword }}
			</view>
		</view>
		<view v-if="sertType==3" class="search-result-item" v-for="(item,index) in searchList" :key="index" @tap="handleToDetail(item.id)">
			<view class="search-result-word">
				<view>{{ item.name }}</view>
				<view>{{ item.artists[0].name }} - {{ item.album.name }}</view>
			</view>
			<text class="iconfont iconbofang"></text>
		</view>
		<view v-if="sertType==1 " class="resou">
			<text>热歌榜：</text>
			<view class="search-list">
				<view class="search-rege" v-for="(item,index) in searchword" :key="index"
					@tap="handleToWord(item.searchWord)">
					<text v-if="index<3" style="color: red;margin-right: 10px;">{{index+1}} </text>
					<text v-else  style="margin-right: 10px;">{{index+1}} </text>
					{{item.searchWord}}
					<!-- <image :src="item.iconType ? item.icourl : '' "mode=""></image> -->
					<view style="margin-top: 6px; font-size: 12px;color: #666;">
						{{ item.content }}
					</view>
				</view>
			</view>
		</view>

	</scroll-view>
	</view>


</template>

<script>
	// import search from "../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue"
	import '../../common/iconfont.css'
	import {
		searchHot,
		searchWord,
		searchSuggest
	} from "../../common/api.js"
	export default {
		data() {
			return {
				searchValue: '',
				searchword: [],
				historyList: [],
				suggestList: [],
				searchList: [],
				sertType: 1
			}
		},
		onLoad() {
			searchHot().then(res => {
				this.searchword = res.data.data
				console.log(res)
			})
			searchWord().then(res => {
				console.log(res)
			})
			searchSuggest().then(res => {
				console.log(res)
			})
			//getStorage从本地缓存中异步获取指定 key 对应的内容
			uni.getStorage({
				key: 'searchHistory',
				success: (res) => {
					this.historyList = res.data

				}
			})
		},

		methods: {
			//获取数据
			search(res) {
				this.historyList.unshift(this.searchValue);
				this.historyList = [...new Set(this.historyList)];
				//setStorage将数据存储在本地缓存中指定的 key 中
				uni.setStorage({
					key: 'searchHistory',
					data: this.historyList
				})
				if(this.searchValue == ""){
					sertType = 1
				}
				this.getSearchList(this.searchValue)
			},
			//移除搜索历史，本地key
			handleToClear() {
				uni.removeStorage({
					key: 'searchHistory',
					success: () => {
						this.historyList = []
					}
				})
			},
			handleToWord(word) {
				this.searchValue = word;
				this.search();
			},
			//搜索列表
			handleToSuggest(e) {
				let value = e;
				if (this.searchValue == "") {
					this.suggestList = []
					this.sertType = 1
				} else {
					searchSuggest(value).then(res => {
						this.suggestList = res.data.result.allMatch
						console.log(res)
						this.sertType = 2
					})
				}

			},
			getSearchList(word) {
				searchWord(word).then((res) => {
					this.searchList = res.data.result.songs;
					this.sertType = 3
					console.log(res)
				});
			},
			handleToDetail(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/player/player?id=' + id
				});
			},
			
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},

		},

	}
</script>

<style>
	.search-history {
		margin: 0 30rpx;
		font-size: 26rpx;
	}

	.search-history-head {
		display: flex;
		justify-content: space-between;
	}

	.search-history-list {
		display: flex;
		margin-top: 36rpx;
		flex-wrap: wrap;
	}

	.search-history-list view {
		padding: 20rpx 40rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
	}

	.search-history text {
		font-size: 20px;
		float: right;
	}

	.search-suggest {
		border-top: 2rpx #e5e5e5 solid;
		padding: 30rpx;
		font-size: 26rpx;
	}

	.search-suggest-title {
		color: #537caa;
		margin-bottom: 40rpx;
	}

	.search-suggest-item {
		color: #666666;
		margin-bottom: 70rpx;
	}

	.search-suggest-item text {
		color: #c2c2c2;
		font-size: 26rpx;
		margin-right: 26rpx;
	}
	/* 热搜榜 */
	.resou{
	margin-left: 24px;	
	}
	.search-rege{
		margin-top: 10px;
	}

</style>
